<template>
	<view class="container">
		<view class="banner">
			<image src="/static/img/bgz_banner.png" mode="widthFix"></image>
		</view>
		<view class="user">
			<view class="select_month" @click="selectChange">
				<view class="label">月份：</view>
				<input placeholder="请选择" v-model="formData.date" disabled></input>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="content">
				<view class="label">工资截图：</view>
				<u-upload :fileList="txList" :action="state.url" :before-upload="beforeUploads" max-count="1"
					@on-remove="(index,list)=> onRemove(index,list,'images')"></u-upload>
			</view>
			<view class="content">
				<view class="label">船名：</view>
				<input v-model="stateData.vesselname" placeholder="请输入" disabled></input>
			</view>
			<view class="content">
				<view class="label">呼号：</view>
				<input v-model="stateData.callsign" placeholder="请输入" disabled></input>
			</view>
			<view class="content">
				<view class="label">IMO：</view>
				<input v-model="stateData.imo" placeholder="请输入" disabled></input>
			</view>
			<view class="content">
				<view class="label">MMSI：</view>
				<input v-model="stateData.mmsi" placeholder="请输入" disabled></input>
			</view>
		</view>
		<view class="btn">
			<u-button @click="save" type="primary">立即提交</u-button>
		</view>
	</view>
	<u-modal closeOnClickOverlay v-model="modal.show" :title="modal.title" :content='modal.content'
		@confirm="modalOk"></u-modal>
	<KDatePicker v-model="state.dateShow" type="month" is-range @change="dateChange" formatter="YYYY-MM" />
	<Tabbar :value="-1" />
</template>

<script setup lang="ts">
	// import dayjs from 'dayjs';
	import Tabbar from '@/components/tabbar.vue'
	import { nextTick, reactive, ref } from 'vue';
	import KDatePicker from '@/components/k-date-picker/KDatePicker.vue'
	import { exposure } from '@/common/api.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { uploadRequest } from '@/util/request/index.js'
	const modal = reactive({
		title: '温馨提示',
		content: '提交成功！我们将会在7个工作日内 审核完成，审核通过后才会显示。',
		show: false,
	})
	const txList = ref([])

	const dateChange = (e) => {
		formData.date = e
		state.dateShow = !state.dateShow
	}
	const state = reactive({
		dateShow: false,
		info: {},
		url: '/api/common/upload',
		uploadObj: {}
	})

	const selectChange = () => {
		state.dateShow = !state.dateShow
	}
	const onRemove = (index, list, key : string) => {
		formData[key] = list.map(item => item.url).join(',')
	}
	const beforeUploads = (index, list) => {
		console.log(index)
		console.log(list)
		uni.showLoading({
			title: '图片上传中...',
			mask: true
		})
		uploadRequest(list[index].url).then(res => {
			console.log(res)
			if (res.code == 1) {
				if (res.data) {
					state.uploadObj = res.data
					formData.images = res.data.url
				}
				uni.hideLoading()
			} else {
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}

		})
		// 只上传偶数索引的文件
		return false;
	}

	const formData = reactive<any>({
		sex: '',
		date: '',
		images: '',
	})
	const stateData = reactive({

	})
	onLoad((o) => {
		state.info = JSON.parse(decodeURIComponent(o.info));
		for (let i in state.info) {
			stateData[i] = state.info[i]
		}
		formData.id = state.info.id
		const date = new Date()
		let year = date.getFullYear(); // 获取当前年份
		let month = date.getMonth() + 1;
		formData.date = `${year}-${month}`
		console.log(uni.$u.http)
		state.url = uni.$u.http.config.baseUrl + state.url
	})

	const save = async () => {
		console.log(formData)
		if (!formData.images) {
			formData.iamges = state.uploadObj.url
		}
		const data = await exposure({
			ship_id: formData.id,
			date: formData.date,
			images: formData.images,
		})
		console.log(data)
		if (data.code == 1) {
			modal.show = true
		}
	}
	const modalOk = () => {
		uni.navigateBack({
			delta: 1
		})
		modal.show = false
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		padding: 20rpx 35rpx 200rpx;
		box-sizing: border-box;
		overflow: auto;

		.banner {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.content,
		.select_month {
			box-sizing: border-box;
			position: relative;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			.label {
				width: 180rpx;
				text-align: right;
			}


			input {
				flex: 1;
				border-radius: 8rpx;
				border: 2rpx solid #282828;
				padding-left: 20rpx;
				background-color: #fff;
				height: 64rpx;
			}

			:deep().u-list-item {
				background-color: #fff;
				border: 2rpx solid #282828;
				margin: 0;
			}

		}

		.select_month {
			:deep().u-icon {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 20rpx;
				margin: auto;
			}
		}

		.btn {
			width: 160rpx;
			margin: 0 auto;
			padding-top: 20rpx;
		}

	}
</style>